<div class="js-import-panel">
  <div id="import-menu" class="row wrapper border-bottom white-bg page-heading">
    <div class="section-title">
      <i class="fa fa-upload"></i>
      import
    </div>
    <div class="section-nav">
      <button
        id="btnImportClearSelected"
        class="btn btn-white btn-sm btn-icon"
        disabled
      >
        <i class="fa fa-times"></i>
        Clear
      </button>
      <button id="btnRetry" class="btn btn-white btn-sm" title disabled>
        <i class="fa fa-upload"></i>
      </button>
      <button id="btnImportCancel" class="btn btn-white btn-sm" title disabled>
        <i class="fa fa-stop"></i>
      </button>
    </div>
  </div>

  <div class="wrapper wrapper-content">
    <div class="row">
      <div class="col-lg-12">
        <div id="import-top" class="ibox-content">
          <div id="dragTarget" class="drag-target drag-idle">
            <div>
              <i class="fa fa-copy fa-3x" style="margin: 0 15px 20px 0;"></i>
              <i
                class="fa fa-folder-open fa-3x"
                style="margin: 0 15px 20px 0;"
              ></i>
              <i
                class="fa fa-file-alt fa-3x"
                style="margin: 0 15px 20px 0;"
              ></i>
            </div>
            <h2 style="font-weight: 500;">
              Drag files or paste data here to
              import
            </h2>
            <div style="font-size: 14pt; font-weight: 100;">
              or
              <a id="js-browse-files" href="#">
                browse your files
              </a>
            </div>
            <form action="#">
              <input
                id="js-browse-files-input"
                type="file"
                style="visibility: hidden"
                multiple
              />
            </form>
          </div>
          <div id="import-file-list">
            <div class="ud-header-row">
              <div class="ud-header ud-h0">
                Actions
              </div>
              <div class="ud-header ud-h1">
                File name
              </div>
              <div class="ud-header ud-h2">
                Query
              </div>
              <div class="ud-header ud-h3">
                Size
              </div>
              <div class="ud-header ud-h4">
                Total rows
              </div>
              <div class="ud-header ud-h5">
                Failed rows
              </div>
              <div class="ud-header ud-h6">
                Header
              </div>
              <div class="ud-header ud-h7">
                Status
              </div>
            </div>
            <div class="ud-canvas"></div>
          </div>
        </div>
      </div>
    </div>

    <div id="import-splitter" class="splitter"></div>

    <div class="row" id="import-detail">
      <div class="col-lg-12">
        <div id="js-import-editor">
          <div class="ibox-content">
            <div class="row">
              <div class="col-lg-12">
                <div class="stats-switcher-viewport">
                  <div class="stats-switcher">
                    <div class="row vertical-align import-imported-table">
                      <div class="col-xs-3">
                        <i class="fa fa-table fa-2x"></i>
                      </div>
                      <div class="col-xs-9 text-right">
                        <h3 class="font-bold">
                          <i class="fa fa-link"></i>
                          <span class="js-import-tab-name"></span>
                        </h3>
                      </div>
                    </div>
                    <div class="import-stats">
                      <div class="import-imported-stats pull-right">
                        <i class="fa fa-thumbs-o-down"></i>
                        &nbsp;
                        <span class="js-rejected-row-count">
                          1023003
                        </span>
                        rows
                      </div>
                      <div class="import-imported-stats">
                        <i class="fa fa-thumbs-o-up"></i>
                        &nbsp;
                        <span class="js-imported-row-count">
                          15000000
                        </span>
                        rows
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="col-lg-12">
                  <div class="import-stats-chart">
                    <div class="import-rejected pull-right"></div>
                    <div class="import-imported"></div>
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="col-lg-12">
                  <div class="grid">
                    <div class="ud-header-row">
                      <div class="ud-header gh-1">
                        <i class="fa fa-hashtag"></i>
                      </div>
                      <div class="ud-header gh-2">
                        Column name
                      </div>
                      <div class="ud-header gh-3">
                        Type
                      </div>
                      <div class="ud-header gh-4">
                        Pattern
                      </div>
                      <div class="ud-header gh-5">
                        Locale
                      </div>
                      <div class="ud-header gh-6">
                        Errors
                      </div>
                    </div>
                    <div class="ud-canvas">
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div id="js-import-error" class="panel panel-danger">
          <div class="panel-heading">
            Import failed
          </div>
          <div class="panel-body">
            <div class="col-sm-7 js-message">
              Server rejected file due to unsupported file format.
            </div>
          </div>
        </div>
        <div id="js-import-placeholder"></div>
      </div>
    </div>
  </div>
</div>